<template>
  <div class="rent-info">
    <ul v-if="list.length" class="rent-info-list">
      <li v-for="(item, index) in list" :key="item">
        <div class="title">{{ titleList[index] }}</div>
        <div class="conetnt">{{ obj[item] }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        id: '',
        maintainScope: '',
        companyName: '',
        linkName: '',
        phone: '',
        detailedAddress: '',
        imgUrl: '',
        entProfile: '',
        clickCount: 1,
        state: 1,
        sendDate: '',
        auditDate: '',
        userId: ''
      },
      list: [],
      titleList: ['消息ID', '维修范围', '公司名称', '联系人', '手机号', '详细地址', '图片地址', '企业介绍', '消息点击量', '1未审核2已审核通过3审核未通过', '发布时间', '审核时间', '发布人']
    }
  },
  created() {
    this._initList()
  },
  methods: {
    _initList() {
      this.list = Object.keys(this.obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.rent-info {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 100;
  padding: 20px;
  box-sizing: border-box;
  .rent-info-list {
    width: 100%;
    padding: 0;
    margin: 0;
    li {
      display: flex;
      background-color: #fafafa;
      border: 1px solid #ebebeb;
      border-bottom: none;
      .title {
        width: 300px;
        padding: 20px 0;
        box-sizing: border-box;
        text-align: center;
        border-right: 1px solid #ebebeb;
      }
      .conetnt {
        flex: 1;
        background-color: #fafafa;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:nth-last-of-type(1) {
        border-bottom: 1px solid #ebebeb;
      }
    }
  }
}
</style>
